<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>网站管理</el-breadcrumb-item>
        <el-breadcrumb-item>页面管理</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card class="box-card">

        <el-dialog title="新增页面" :title="pageForm.id==null?'新增页面':'编辑页面'" :visible.sync="dialogFormVisible" :append-to-body=true>

          <el-form :model="pageForm"  ref="userForm" label-width="80px">

            <el-row :gutter="22">
              <el-col :span="11">
                <el-form-item label="选择模板" prop="templateId">
                  <el-select v-model="pageForm.templateId">
                    <el-option
                      v-for="item in typeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="页面名称" prop="pageName">
                  <el-input v-model="pageForm.pageName" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="22">
              <el-col :span="11">
                <el-form-item label="数据URL" prop="dataUrl">
                  <el-input v-model="pageForm.dataUrl" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="页面相对路径" prop="relatives">
                  <el-input v-model="pageForm.relatives" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>




        <el-form :model="pages" class="demo-form-inline" >
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="4">
                <el-input placeholder="关键字" v-model="pages.name"></el-input>
              </el-col>
              <el-button plain type="info" @click="searchList">搜索</el-button>
              <el-button type="primary" @click="addSave">新增页面</el-button>
            </el-form-item>
          </el-row>
        </el-form>


        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="pageName"
            label="页面名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="templateId"
            label="模板Id"
            width="150">
          </el-table-column>
          <el-table-column
            prop="dataUrl"
            label="数据URL"
            width="150">
          </el-table-column>
          <el-table-column
            prop="relatives"
            label="页面相对路径"
            width="150">
          </el-table-column>
          <el-table-column
            label="状态"
            width="150">
            <template slot-scope="scope">
              {{scope.row.status|statusFit}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="publishPage(scope.row.id)">发布页面</el-button>
              <el-button size="small" type="text" @click="updatePage(scope.row.id)">修改</el-button>
              <el-button size="small" type="text" @click="deletePage(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>


      </el-card>


    </div>
</template>

<script>
    export default {
        name: "Page",
      data(){
        return{
          pageForm:{},
          tableData:[],
          pages:{},
          dialogFormVisible:false,
          typeList:[],
          currentPage:0,
          pageSize:5,
          total:0
        }
      },
      methods:{
        //模板列表
        searchList:function () {
          this.$http.post("/education-website/eduPage/list/"+this.currentPage+"/"+this.pageSize,this.pages).then((res)=>{
            this.tableData=res.data.result.list;
            this.total=res.data.result.total;
          })
        },
        //添加模板
        addSave:function () {
          this.dialogFormVisible=true;
          this.typeLists();
        },
        //获取模板列表
        typeLists:function(){
          this.$http.get("/education-website/eduTemplate/getList").then((res)=>{
            this.typeList=res.data.result;
          })
        },
        //保存模板
        save:function () {
          this.$http.post("/education-website/eduPage/addSave",this.pageForm).then((res)=>{
            if(res.data.success){
              this.$message.success(res.data.message);
              this.pageForm={}
              this.searchList();
            }else{
              this.$message.error(res.data.message);
            }
            this.dialogFormVisible=false
          })
        },
        //发布页面
        publishPage:function (id) {

          this.$http.get("/education-website/eduPage/publishPage/"+id).then((res)=>{
            if(res.data.success){
              this.$message.success(res.data.message);
            }else{
              this.$message.error(res.data.message);
            }
          })

        },
        //修改页面
        updatePage:function (id) {
          this.dialogFormVisible=true;
          this.$http.get("/education-website/eduPage/findPage/"+id).then((res)=>{
            if(res.data.success){
              this.pageForm=res.data.result;
            }else{
              this.$message.error(res.data.message);
            }
          })
        },
        //删除页面
        deletePage:function (id) {
          this.$http.get("/education-website/eduPage/deletePage/"+id).then((res)=>{
            if(res.data.success){
              this.$message.success(res.data.message);
            }else{
              this.$message.error(res.data.message);
            }
          })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize=val;
          this.searchList();
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          this.searchList();
        },
      },
      mounted () {
        this.searchList();
      },
      filters:{
        statusFit:function (val) {
          if(val==0){
            return '未发布';
          }
          if(val==1){
            return '已发布';
          }
        }
      }
    }
</script>

<style scoped>

</style>
